<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { statisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import table2excel from 'js-table2excel';
  const action = reactive({
    list:[] as any[],
  })
  const handleDownload = ()=>{
    const tHeader = [
      {title: '排榜名次', key: "rank"},
      {title: '用户ID', key: "userId"},
      {title: '用户昵称', key: "nickname"},
      {title: '归属公会', key: "unionName"},
      {title: '归属公会ID', key: "unionId"},
      {title: '活动积分', key: "userScore"},
      {title: '礼物id:189', key: "gift_189"},
      {title: '礼物id:190', key: "gift_190"},
      {title: '礼物id:191', key: "gift_191"},
      {title: '礼物id:192', key: "gift_192"},
      {title: '礼物id:193', key: "gift_193"},
      {title: '礼物id:194', key: "gift_194"},
    ]
    table2excel(tHeader, action.list, '2023双旦富豪榜')
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await statisticsApi.sdj2023RankRich()
    loading.close()
    const { list=[] } = res?.data || {}
    action.list = list
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <el-button type="warning" @click="handleDownload">导出</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column width="100" prop="rank" label="排榜名次" />
      <el-table-column width="100" prop="userId" label="用户ID" />
      <el-table-column min-width="140" show-overflow-tooltip prop="nickname" label="用户昵称" />
      <el-table-column min-width="140" show-overflow-tooltip prop="unionName" label="归属公会" />
      <el-table-column width="100" prop="unionId" label="归属公会ID" />
      <el-table-column min-width="120" prop="userScore" label="活动积分" />
      <el-table-column min-width="120" prop="gift_189" label="礼物id:189" />
      <el-table-column min-width="120" prop="gift_190" label="礼物id:190" />
      <el-table-column min-width="120" prop="gift_191" label="礼物id:191" />
      <el-table-column min-width="120" prop="gift_192" label="礼物id:192" />
      <el-table-column min-width="120" prop="gift_193" label="礼物id:193" />
      <el-table-column min-width="120" prop="gift_194" label="礼物id:194" />
    </el-table>
  </div>
</template>